window.addEventListener("load", function () {
	// 用户名
	const regex = /^[a-zA-Z0-9]{6,20}$/;
	// 电话号码
	const regex2 =
		/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
	// 验证码
	const regex3 = /^[0-9]{6}$/;
	// 密码
	const regex4 = /^\w{6,12}$/;

	// 用户名失焦
	$("#username").addEventListener("blur", function (e) {
		let usernameValue = $("#username").value;
		if (regex.test(usernameValue)) {
			$("#username").style.border = "1px solid black";
			$("#un").textContent = "";
		} else {
			$("#username").style.border = "1px solid red";
			$("#un").textContent = "清输入用户名（6-20位字母数字）";
			$("#un").style.color = "red";
			e.preventDefault();
		}
	});
	// 电话号码失焦
	$("#telephone").addEventListener("blur", function (e) {
		let telephoneValue = $("#telephone").value;
		if (regex2.test(telephoneValue)) {
			$("#telephone").style.border = "1px solid black";
			$("#telephone").nextElementSibling.textContent = "";
		} else {
			$("#telephone").style.border = "1px solid red";
			$("#telephone").nextElementSibling.textContent = "请输入11位的电话号码";
			$("#telephone").nextElementSibling.style.color = "red";
			e.preventDefault();
		}
	});
	// 验证码失焦
	$("#verification").addEventListener("blur", function (e) {
		let verificationValue = $("#verification").value;
		if (regex3.test(verificationValue)) {
			$("#verification").style.border = "1px solid black";
		} else {
			$("#verification").style.border = "1px solid red";
			$("#verification").style.borderRight = "0";
			$(".pr").nextElementSibling.textContent = "请输入验证码";
			$(".pr").nextElementSibling.style.color = "red";
			e.preventDefault();
		}
	});

	// 密码失焦
	$("#password").addEventListener("blur", function (e) {
		let passwordtValue = $("#password").value;
		if (regex2.test(passwordtValue)) {
			$("#password").style.border = "1px solid black";
			$("#password").nextElementSibling.textContent = "";
		} else {
			$("#password").style.border = "1px solid red";
			$("#password").nextElementSibling.textContent = "请输入11位的电话号码";
			$("#password").nextElementSibling.style.color = "red";
			e.preventDefault();
		}
	});

	// 按钮点击事件
	$(".ret button").addEventListener("click", function (e) {
		console.log(111);
		let usernameValue = $("#username").value;
		console.log(usernameValue);
		let telephoneValue = $("#telephone").value;
		let verificationValue = $("#verification").value;
		let passwordtValue = $("#password").value;
		//用户名
		if (regex.test(usernameValue)) {
			$("#username").style.border = "1px solid black";
		} else {
			$("#username").style.border = "1px solid red";
			$("#un").textContent = "清输入用户名（6-20位字母数字）";
			$("#un").style.color = "red";
			e.preventDefault();
		}
		//电话号码
		if (regex2.test(telephoneValue)) {
			$("#telephone").style.border = "1px solid black";
		} else {
			$("#telephone").style.border = "1px solid red";
			$("#telephone").nextElementSibling.textContent = "请输入11位的电话号码";
			$("#telephone").nextElementSibling.style.color = "red";
			e.preventDefault();
		}
		//验证码
		if (regex3.test(verificationValue)) {
			$("#verification").style.border = "1px solid black";
		} else {
			$("#verification").style.border = "1px solid red";
			$("#verification").style.borderRight = "0";
			$(".pr").nextElementSibling.textContent = "请输入验证码";
			$(".pr").nextElementSibling.style.color = "red";
			e.preventDefault();
		}

		if (regex4.test(passwordtValue)) {
			$("#password").style.border = "1px solid black";
		} else {
			$("#password").style.border = "1px solid red";
			$("#password").nextElementSibling.textContent = "请输入6至12位密码";
			$("#password").nextElementSibling.style.color = "red";
			e.preventDefault();
		}
	});
});
